import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Table, Card, DatePicker, Select, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import GapBlock from '@/components/GapBlock'
import {
  commissionManageList,
} from '@/services/distribution/commissionPlace'

const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))
const { Option } = Select
const columns = [
  {
    title: '序号',
    dataIndex: 'sort',
    key: 'sort',
    render: (t) => <>{t + 1}</>
  },
  {
    title: '提现人',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '提现银行卡',
    dataIndex: 'card',
    key: 'card',
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '提现金额',
    dataIndex: 'money',
    key: 'money',
  },
  {
    title: '申请时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '备注',
    dataIndex: 'dec',
    key: 'dec',
  },
  {
    title: '提现状态',
    dataIndex: 'status',
    key: 'status',
  },
];
const statusList = [
  {
      label: '已提交',
      value: '1'
  },
  {
      label: '已发送',
      value: '2'
  },
  {
      label: '驳回',
      value: '3'
  },
  {
      label: '发送失败',
      value: '4'
  },
  {
      label: '发送中',
      value: '5'
  },
]
const WithdrewManage = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [data, setData] = useState([])

  useEffect(() => {
    init()
  }, [])

  const init = async params => {
    const res = await commissionManageList(params)
    setData(res.data)
  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return(
      <>
        <Col span={6}>
          <Form.Item label={`收款人`}>
            {getFieldDecorator(`name`, {})
              (<Input />)}
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label={`操作状态`}>
            {getFieldDecorator(`name`, {})
              (
                <Select>
                  {
                    statusList.map(
                      e => <Option key={e.value}>{e.label}</Option>
                    )
                  }
                </Select>
              )}
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label={`申请日期`}>
            {getFieldDecorator(`name`, {})
              (<DatePicker />)}
          </Form.Item>
        </Col>
      </>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    
  }
  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Card>
        <div>当前账号可提现余额：</div>
        <Button type="primary" style={{marginTop: 10}}>提现</Button>
      </Card>
      <GapBlock />
      <Table 
        columns={columns}
      />
    </PageHeaderWrapper>
    )
}

export default Form.create()(WithdrewManage)
